<!DOCTYPE html>
<!-- saved from url=(0035)http://marcosesperon.es/apps/messi/ -->
<html lang="es_ES"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	<title>Messi, simple jQuery message plugin</title>
	<meta name="description" content="Messi, simple jQuery message plugin">
	<meta name="author" content="Marcos Esperón">

	<meta name="viewport" content="width=device-width">
	
  <link rel="stylesheet" href="http://marcosesperon.es/apps/messi/messi.css">
  <link href="./simple_message_files/css" rel="stylesheet" type="text/css">
  <style>
    /* RESET */
    article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { display: block; }
    audio[controls], canvas, video { display: inline-block; *display: inline; *zoom: 1; }
    html { font-size: 100%; overflow-y: scroll; -webkit-overflow-scrolling: touch; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
    body { margin: 0; font-size: 13px; line-height: 1.231; }
    body, button, input, select, textarea { font-family: sans-serif; color: #222; }
    ::-moz-selection { background: #fe57a1; color: #fff; text-shadow: none; }
    ::selection { background: #fe57a1; color: #fff; text-shadow: none; }
    a { color: #00e; }
    a:visited { color: #551a8b; }
    a:focus { outline: thin dotted; }
    a:hover, a:active { outline: 0; }
    abbr[title] { border-bottom: 1px dotted; }
    b, strong { font-weight: bold; }
    blockquote { margin: 1em 40px; }
    dfn { font-style: italic; }
    hr { display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1em 0; padding: 0; }
    ins { background: #ff9; color: #000; text-decoration: none; }
    mark { background: #ff0; color: #000; font-style: italic; font-weight: bold; }
    pre, code, kbd, samp { font-family: monospace, monospace; _font-family: 'courier new', monospace; font-size: 1em; }
    pre { white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
    q { quotes: none; }
    q:before, q:after { content: ""; content: none; }
    small { font-size: 85%; }
    sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
    sup { top: -0.5em; }
    sub { bottom: -0.25em; }
    ul, ol { margin: 1em 0; padding: 0 0 0 40px; }
    dd { margin: 0 0 0 40px; }
    nav ul, nav ol { list-style: none; margin: 0; padding: 0; }
    img { border: 0; -ms-interpolation-mode: bicubic; }
    svg:not(:root) {
        overflow: hidden;
    }
    figure { margin: 0; }
    form { margin: 0; }
    fieldset { border: 0; margin: 0; padding: 0; }
    legend { border: 0; *margin-left: -7px; padding: 0; }
    label { cursor: pointer; }
    button, input, select, textarea { font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle; }
    button, input { line-height: normal; *overflow: visible; }
    button, input[type="button"], input[type="reset"], input[type="submit"] { cursor: pointer; -webkit-appearance: button; }
    input[type="checkbox"], input[type="radio"] { box-sizing: border-box; }
    input[type="search"] { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box; }
    button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }
    textarea { overflow: auto; vertical-align: top; }
    input:valid, textarea:valid {  }
    input:invalid, textarea:invalid { background-color: #f0dddd; }
    table { border-collapse: collapse; border-spacing: 0; }
    
    /* ---- */
    html, body{margin: 0; padding: 0; width: 100%; height: 100%;}
    body{
      background:url() #E6CDA0 repeat;
      font:16px/26px Helvetica, Helvetica Neue, Arial;
      height: auto;
      text-shadow: 1px 1px 0px #fff, 3px 3px 0px rgba(0, 0, 0, 0.15);
    }
    header,
    section {
      width: 480px;
      margin: 75px auto 25px;
    }
    footer{
      background-color: #000;
      width: 100%;
      height: 40px;
      position: fixed;
      bottom: 0;
    }
    a,
    a:visited {
      color: #fff;
      text-shadow: 1px 1px 0px #000, 3px 3px 0px rgba(255, 255, 255, 0.15);
      text-decoration: none;
      cursor: pointer;
    }
    a:hover {
      text-decoration: underline;
    }
    h1{
      letter-spacing: -1px;
      color: #000;
      display: block;
      text-align: center;
      font-size: 6.5em;
      font-family: 'Sonsie One';
      text-shadow: 3px 3px 0px #fff, 6px 6px 0px rgba(0, 0, 0, 0.15);
    }
    h3{
      margin-top: 100px;
    }
    .quote{
      display: block;
      text-align: center;
      font-size: 1em;
      font-style: italic;
      font-family:georgia,"times new roman",times,serif;
    }
    .quote small{
      font-weight: normal;
    }
    .tac{
      text-align: center;
    }
    .taj{
      text-align: justify;
    }
    pre, .codify{
      font-family: monospace;
      font-size: 12px;
      line-height: 16px;
    }
    .code{
      display: none;
      padding: 10px;
      margin: 0;
    }
    .code:hover{
      background-color: #fff;
    }
    #show-hide-code{
      float: right;
      font-size: 13px;
      padding: 6px 12px;
    }
    .credits{
      font-size: 12px;
      line-height: 7px;
    }
    .options{
      font-size: 12px;
      line-height: 26px;
      width: 100%;
      text-align: left;
    }
    .options thead{
      border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }
    .options tbody{
      vertical-align: top;
    }
    #nav{
      float: right;
      margin-right: 12px;
    }
    #nav ul, #nav ul li{
      display: inline-block;
      font-size: 14px;
      line-height: 16px;
      padding-top: 6px;
      margin-left: 12px;
    }
  </style>
  
<link type="text/css" rel="stylesheet" href="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/style.css"><script src="./simple_message_files/cb=gapi.loaded_1" async=""></script><script src="./simple_message_files/cb=gapi.loaded_0" async=""></script><script type="text/javascript" charset="utf-8" src="chrome-extension://cpngackimfmofbokmjmljamhdncknpmg/page_context.js"></script><style type="text/css"></style></head>
<body screen_capture_injected="true">
  
  <a href="https://github.com/marcosesperon/Messi/"><img style="position: absolute; top: 0; right: 0; border: 0;" src="./simple_message_files/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub"></a>

  <header id="top">
    <h1>Messi</h1>
    <h2 class="quote"><i>- A simple message plugin for jQuery -<br><small>by <a href="http://twitter.com/marcosesperon">@marcosesperon</a></small></i></h2>
  </header>
  
  <section>
    <h3 id="about">About</h3>
    <p class="taj"><strong>Messi</strong> is a jQuery plugin to show clean, elegant messages in a simple way. With Messi you will avoid to use default JavaScript alert notifications or new windows to provide extended information to the user.</p>
    <p class="taj">Display text, html content, images and ajax requests with 5KB code.</p>
    <p><img src="./simple_message_files/messi.png" alt="Messi"></p>
    <p>Check in GitHub: <a href="https://github.com/marcosesperon/Messi/">https://github.com/marcosesperon/Messi/</a></p>
    
    <h3 id="usage">Usage<button id="show-hide-code" class="btn">show/hide code</button></h3>
    <p>Simple message:</p>
    <ul>
      <li>
        <a id="simple">Simple message</a>
        <pre class="code">new Messi('This is a message with Messi.');</pre>
      </li>
      <li>
        <a id="title">Message with title.</a>
        <pre class="code">new Messi('This is a message with Messi.', {title: 'Title'});</pre>
      </li>
      <li>
        <a id="modal">Message in modal view.</a>
        <pre class="code">new Messi('This is a message with Messi in modal view. Now you can\'t interact with other elements in the page until close this.', {title: 'Modal Window', modal: true});</pre>
      </li>
      <li>
        <a id="absolute">Message in absolute position.</a>
        <pre class="code">new Messi('This is a message with Messi in absolute position.', {center: false, viewport: {top: '760px', left: '0px'}});</pre>
      </li>
    </ul>
    <p>Buttons:</p>
    <ul>
      <li>
        <a id="close-button">Message with custom button.</a>
        <pre class="code">new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Close', val: 'X'}]});</pre>
      </li>
      <li>
        <a id="yes-no-buttons">Message with custom buttons (yes/no) and callback function.</a>
        <pre class="code">new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Yes', val: 'Y'}, {id: 1, label: 'No', val: 'N'}], callback: function(val) { alert('Your selection: ' + val); }});</pre>
      </li>
      <li>
        <a id="yes-no-cancel-buttons">Message with custom buttons (yes/no/cancel) with style classes.</a>
        <pre class="code">new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Yes', val: 'Y', class: 'btn-success'}, {id: 1, label: 'No', val: 'N', class: 'btn-danger'}, {id: 2, label: 'Cancel', val: 'C'}]});</pre>
      </li>
    </ul>
    <p>Applying styles to title:</p>
    <ul>
      <li>
        <a id="success-title">Success title.</a>
        <pre class="code">new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'success', buttons: [{id: 0, label: 'Close', val: 'X'}]});</pre>
      </li>
      <li>
        <a id="info-title">Info title.</a>
        <pre class="code">new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'info', buttons: [{id: 0, label: 'Close', val: 'X'}]});</pre>
      </li>
      <li>
        <a id="error-title">Error title (animated).</a>
        <pre class="code">new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'anim error', buttons: [{id: 0, label: 'Close', val: 'X'}]});</pre>
      </li>
      <li>
        <a id="warning-title">Warning title (animated).</a>
        <pre class="code">new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'anim warning', buttons: [{id: 0, label: 'Close', val: 'X'}]});</pre>
      </li>
    </ul>
    <p>Other options:</p>
    <ul>
      <li>
        <a id="alert">Use Messi.alert() to launch a fast simple message.</a>
        <pre class="code">Messi.alert('This is an alert with Messi.');</pre>
      </li>
      <li>
        <a id="ask">Use Messi.ask() to launch a fast yes/no message.</a>
        <pre class="code">Messi.ask('This is a question with Messi. Do you like it?', function(val) { alert('Your selection: ' + val); });</pre>
      </li>
      <li>
        <a id="load">Use Messi.load() to show an ajax request as a message.</a>
        <pre class="code">Messi.load('login.php', {params: {user: 'demo', password: '1234'}});</pre>
      </li>
      <li>
        <a id="img">Use Messi.img() to show an image.</a>
        <pre class="code">Messi.img('messi.jpg');</pre>
      </li>
    </ul>
    
    <h3 id="setup">Setup</h3>
    <p>Messi requires <a href="http://jquery.com/" title="jQuery">jQuery</a> framework to work, so include it first of all in your project. After that:</p>
    <ol>
      <li>Download <strong>Messi</strong> from <a href="https://github.com/marcosesperon/Messi">gitHub</a> and descompress.</li>
      <li>Copy messi.css and messi.js files (or minified version) to your project folder.</li>
      <li>Edit you html pages to include both files:<pre>&lt;link rel="stylesheet" href="messi.min.css" /&gt;
&lt;script src="messi.js"&gt;&lt;/script&gt;</pre></li>
      <li>Enjoy it!</li>
    </ol>
    
    <h3 id="options">Options</h3>
    <table class="options">
      <thead>
        <tr>
          <th width="25%">Option</th>
          <th width="60%">Description</th>
          <th width="15%">Default</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code>autoclose</code></td>
          <td>Close message after 'x' milliseconds.</td>
          <td><code>null</code></td>
        </tr>
        <tr>
          <td><code>buttons</code></td>
          <td>Array of buttons to show in the foot of the message, i.e: [{id: 'ok', label: 'OK', val: 'OK', class: ''}].</td>
          <td><code>[]</code></td>
        </tr>
        <tr>
          <td><code>callback</code></td>
          <td>Callback function after close the message.</td>
          <td><code>null</code></td>
        </tr>
        <tr>
          <td><code>center</code></td>
          <td>Centers message on the viewport.</td>
          <td><code>true</code></td>
        </tr>
        <tr>
          <td><code>closeButton</code></td>
          <td>Show close button in header title (or content if buttons array is empty).</td>
          <td><code>true</code></td>
        </tr>
        <tr>
          <td><code>height</code></td>
          <td>Content height.</td>
          <td><code>'auto'</code></td>
        </tr>
        <tr>
          <td><code>title</code></td>
          <td>Text title in the message.</td>
          <td><code>null</code></td>
        </tr>
        <tr>
          <td><code>titleClass</code></td>
          <td>Title background CSS style: info, warning, success, error, anim.</td>
          <td><code>null</code></td>
        </tr>
        <tr>
          <td><code>modal</code></td>
          <td>Shows message in modal view (load background div).</td>
          <td><code>false</code></td>
        </tr>
        <tr>
          <td><code>modalOpacity</code></td>
          <td>If modal, set the div's opacity.</td>
          <td><code>.2</code></td>
        </tr>
        <tr>
          <td><code>padding</code></td>
          <td>Sets the content padding.</td>
          <td><code>'10px'</code></td>
        </tr>
        <tr>
          <td><code>show</code></td>
          <td>Show message after load.</td>
          <td><code>true</code></td>
        </tr>
        <tr>
          <td><code>unload</code></td>
          <td>Unload message from DOM after hide.</td>
          <td><code>true</code></td>
        </tr>
        <tr>
          <td><code>viewport</code></td>
          <td>If not center message, sets X and Y positions.</td>
          <td><code>{top: '0px', left: '0px'}</code></td>
        </tr>
        <tr>
          <td><code>width</code></td>
          <td>Message width.</td>
          <td><code>'500px'</code></td>
        </tr>
        <tr>
          <td><code>zIndex</code></td>
          <td>Message initial z-index CSS property.</td>
          <td><code>99999</code></td>
        </tr>
      </tbody>
    </table>
    
    <h3 id="changelog">Changelog</h3>
    <div class="codify">
      <p>1.3 <i>[13/03/2013]</i></p>
      <ul>
        <li>Fixed "class" attribute to work in IE8.</li>
      </ul>
      <p>1.2 <i>[31/01/2013]</i></p>
      <ul>
        <li>Send parameters to Messi.load() request.</li>
        <li>Unbind resize event problem solved.</li>
        <li>Minor CSS and JS fixes for IE browsers.</li>
      </ul>
      <p>1.1 <i>[01/05/2012]</i></p>
      <ul>
        <li>Added window resize control.</li>
      </ul>
      <p>1.0 <i>[30/04/2012]</i></p>
      <ul>
        <li>Initial release.</li>
      </ul>
    </div>
    
    <h3 id="credits">Credits</h3>
    <div class="credits">
      <p>Messi is a plugin for <a href="http://jquery.com/" title="jQuery">jQuery</a> JavaScript framework.</p>
      <p>Based on Jason Frame's project <a href="http://onehackoranother.com/projects/jquery/boxy/">Boxy</a>.</p>
      <p>Style classes for buttons are from <a href="http://twitter.github.com/bootstrap/">Twitter Bootstrap's</a> project.</p>
    </div>
    
    <h3 id="donations">Donations</h3>
    <div class="tac" style="padding-bottom: 60px"><form action="https://www.paypal.com/cgi-bin/webscr" method="post">
      <input type="hidden" name="cmd" value="_s-xclick">
      <input type="hidden" name="encrypted" value="-----BEGIN PKCS7-----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-----END PKCS7-----">
      <input type="image" src="./simple_message_files/btn_donateCC_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
      <img alt="" border="0" src="./simple_message_files/pixel.gif" width="1" height="1">
    </form></div>
    
  </section>
  
  <footer>
    
    <div style="float: left; margin-top: 10px; margin-left: 10px">
      <iframe src="./simple_message_files/saved_resource.htm" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:120px; height:21px;" allowtransparency="true"></iframe>  
    </div>
    <div style="float: left; margin-top: 10px">
      <a href="https://twitter.com/share" class="twitter-share-button" data-via="marcosesperon" data-hashtags="jquery">Tweet</a>
      <script type="text/javascript" async="" src="http://www.google-analytics.com/ga.js"></script><script type="text/javascript" async="" src="./simple_message_files/plusone.js" gapi_processed="true"></script><script id="twitter-wjs" src="http://platform.twitter.com/widgets.js"></script><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
    </div>
    <div style="float: left; margin-top: 10px">
      <!-- Place this tag where you want the +1 button to render -->
      <div id="___plusone_0" style="text-indent: 0px; margin: 0px; padding: 0px; background-color: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: baseline; display: inline-block; width: 90px; height: 20px; background-position: initial initial; background-repeat: initial initial;"><iframe frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="position: static; top: 0px; width: 90px; margin: 0px; border-style: none; left: 0px; visibility: visible; height: 20px;" tabindex="0" vspace="0" width="100%" id="I0_1382377567786" name="I0_1382377567786" src="./simple_message_files/fastbutton.htm" data-gapiattached="true" title="+1"></iframe></div>
      
      <!-- Place this render call where appropriate -->
      <script type="text/javascript">
        (function() {
          var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
          po.src = 'https://apis.google.com/js/plusone.js';
          var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
        })();
      </script>
    </div>

    <nav id="nav">
      <ul>
        <li><a href="http://marcosesperon.es/apps/messi/#about">About</a></li>
        <li><a href="http://marcosesperon.es/apps/messi/#usage">Usage</a></li>
        <li><a href="http://marcosesperon.es/apps/messi/#setup">Setup</a></li>
        <li><a href="http://marcosesperon.es/apps/messi/#options">Options</a></li>
        <li><a href="http://marcosesperon.es/apps/messi/#changelog">Changelog</a></li>
        <li><a href="http://marcosesperon.es/apps/messi/#credits">Credits</a></li>
        <li><a href="http://marcosesperon.es/apps/messi/#donations">Donations</a></li>
      </ul>
    </nav>
  </footer>
  
  <script src="./simple_message_files/jquery.min.js"></script>
  <script src="./simple_message_files/messi.js"></script>
  <script>
    jQuery.noConflict ();
    (function($) {
      $(document).ready(function() {
        
        $('#show-hide-code').on('click', function() {
          $('.code').toggle();
        });
        
        // Examples:
        
        $('#simple').on('click', function() {
          new Messi('This is a message with Messi.');
        });
        
        $('#title').on('click', function() {
          new Messi('This is a message with Messi.', {title: 'Title'});
        });
        
        $('#modal').on('click', function() {
          new Messi('This is a message with Messi in modal view. Now you can\'t interact with other elements in the page until close this.', {title: 'Modal Window', modal: true});
        });
        
        $('#absolute').on('click', function() {
          new Messi('This is a message with Messi in absolute position.', {center: false, viewport: {top: '760px', left: '0px'}});
        });
        
        $('#close-button').on('click', function() {
          new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Close', val: 'X'}]});
        });
        
        $('#yes-no-buttons').on('click', function() {
          new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Yes', val: 'Y'}, {id: 1, label: 'No', val: 'N'}], callback: function(val) { alert('Your selection: ' + val); }});
        });
        
        $('#yes-no-cancel-buttons').on('click', function() {
          new Messi('This is a message with Messi with custom buttons.', {title: 'Buttons', buttons: [{id: 0, label: 'Yes', val: 'Y', "class": 'btn-success'}, {id: 1, label: 'No', val: 'N', "class": 'btn-danger'}, {id: 2, label: 'Cancel', val: 'C'}]});
        });
        
        $('#success-title').on('click', function() {
          new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'success', buttons: [{id: 0, label: 'Close', val: 'X'}]});
        });
        
        $('#info-title').on('click', function() {
          new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'info', buttons: [{id: 0, label: 'Close', val: 'X'}]});
        });
        
        $('#error-title').on('click', function() {
          new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'anim error', buttons: [{id: 0, label: 'Close', val: 'X'}]});
        });
        
        $('#warning-title').on('click', function() {
          new Messi('This is a message with Messi.', {title: 'Title', titleClass: 'anim warning', buttons: [{id: 0, label: 'Close', val: 'X'}]});
        });
        
        $('#alert').on('click', function() {
          Messi.alert('This is an alert with Messi.');
        });
        
        $('#ask').on('click', function() {
          Messi.ask('This is a question with Messi. Do you like it?', function(val) { alert('Your selection: ' + val); });
        });
        
        $('#load').on('click', function() {
          Messi.load('ajax.html');
        });
        
        $('#img').on('click', function() {
          Messi.img('messi.jpg');
        });
        
      });
    })(jQuery);
  </script>
  
  <script type="text/javascript">
  
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-5132992-2']);
    _gaq.push(['_trackPageview']);
  
    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  
  </script>

<iframe name="oauth2relay869507990" id="oauth2relay869507990" src="./simple_message_files/postmessageRelay.htm" style="width: 1px; height: 1px; position: absolute; top: -100px;"></iframe></body></html>